<template>
    <div id="map">

    </div>
</template>

<script>
    import {Map, View} from 'ol'
    import OSM from 'ol/source/OSM'
    import TileLayer from 'ol/layer/Tile'
    import {inAndOut,easeIn,easeOut,linear,upAndDown} from 'ol/easing'
    export default {
        name: "ViewDesc",
        data() {
            return {
                map: null
            }
        },
        mounted(){
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    })
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影,84参考系投影
                    zoom: 12,  //缩放到的级别
                    constrainRotation:false,//true/false没有约束，4将旋转限制为 0、90、180 和 270 度
                    enableRotation:true,
                    //extent:[-180.0, 0.0, 180.0, 90.0], // [左下角经度，左下角纬度，右上角经度，右上角纬度]
                    constrainOnlyCenter	:false, // 如果为 true，则范围约束将仅适用于视图中心而不是整个范围
                    //smoothExtentConstraint	:true, // 如果为true，范围约束将被平滑地应用，即允许视图稍微超出给定的extent
                    //maxResolution:256, // 如果未指定，则以投影的有效范围适合 256x256 像素图块的方式计算
                    // minResolution:256, // 如果未指定，则以投影的有效范围适合 256x256 像素图块的方式计算
                    //maxZoom:5,//用于确定分辨率约束的最大缩放级别
                    //minZoom:0,//用于确定分辨率约束的最小缩放级别
                    //multiWorld:false,//如果false视图受到约束，因此只有一个世界可见，并且您无法平移边缘。如果true地图可能以低缩放级别显示多个世界
                    //constrainResolution:false,//如果为 true，则视图将始终在交互后以最接近的缩放级别进行动画处理；false 表示允许中间缩放级别。
                    //smoothResolutionConstraint:true,//如果为 true，则视图将始终在交互后以最接近的缩放级别进行动画处理；false 表示允许中间缩放级别。
                    //showFullExtent:true,//允许缩小视图以显示完整的配置范围
                    //resolution:"",//视图的初始分辨率。单位是projection每像素的单位（例如每像素米
                    //resolutions:[50,40,30,20,10,5,2],//指定缩放级别的分辨率,数组中的索引对应于缩放级别，因此分辨率值必须按降序排列。
                    //rotation:Math.PI/2,//以弧度为单位的视图初始旋转（顺时针旋转，0 表示北）
                     //zoomFactor:2,//用于计算相应分辨率的缩放因子
                    //padding:[350,150,150,150],//填充（以 css 像素为单位）顺序是上、右、下、左,如果地图视口沿其边缘部分被其他内容（覆盖）覆盖，则此设置允许将视口的中心从该内容移开
                })
            });

            setTimeout(()=>{
                //this.adjustMethod();
                //this.animateMethod();
                this.otherMethod();
            },5000)
        },
        methods:{
            //adjust开头的方法
            adjustMethod(){
                console.log(this.map.getView())
                let view = this.map.getView();
                //view.adjustCenter([-10, 3]) // 将相对坐标添加到视图的中心
                //view.adjustResolution(3) //将视图分辨率乘以一个比率
                //view.adjustRotation(Math.PI/2,[130,25])//向视图旋转添加一个值
                //view.adjustZoom(3,[100,25])//将值添加到视图缩放级别
            },

            animateMethod(){
                let view = this.map.getView();
                view.animate(
                    {zoom: 10,rotation:Math.PI/2,duration:2000},
                    {center:[116.36564254760744, 39.90486412650293],easing:easeOut,duration:10000});

                setTimeout(()=>{
                    //取消动画
                    view.cancelAnimations();
                },3000)
            },
            otherMethod(){
                let view = this.map.getView();
                let extent = [106.36564254760744, 30.90486412650293, 116.36564254760744, 39.90486412650293]
                view.fit(extent, {//根据给定的地图大小和边界拟合给定的几何图形或范围
                    constrainResolution: false,
                    earest:true,
                    duration:3000,
                    callback:()=>{console.log("aaa")}
                })
            }
        }
    }
</script>

<style scoped>
 #map{
     width: 100%;
     height: 100%;
 }
</style>